<!DOCTYPE html>
<html lang="en">

   <head>
      <meta charset="UTF-8"/>
      <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      <title>轮播图点击切换</title>
      <style>
          * {
              box-sizing: border-box;
          }

          .slider {
              width: 560px;
              height: 400px;
              overflow: hidden;
          }

          .slider-wrapper {
              width: 100%;
              height: 320px;
          }

          .slider-wrapper img {
              width: 100%;
              height: 100%;
              display: block;
          }

          .slider-footer {
              height: 80px;
              background-color: rgb(100, 67, 68);
              padding: 12px 12px 0 12px;
              position: relative;
          }

          .slider-footer .toggle {
              position: absolute;
              right: 0;
              top: 12px;
              display: flex;
          }

          .slider-footer .toggle button {
              margin-right: 12px;
              width: 28px;
              height: 28px;
              appearance: none;
              border: none;
              background: rgba(255, 255, 255, 0.1);
              color: #fff;
              border-radius: 4px;
              cursor: pointer;
          }

          .slider-footer .toggle button:hover {
              background: rgba(255, 255, 255, 0.2);
          }

          .slider-footer p {
              margin: 0;
              color: #fff;
              font-size: 18px;
              margin-bottom: 10px;
          }

          .slider-indicator {
              margin: 0;
              padding: 0;
              list-style: none;
              display: flex;
              align-items: center;
          }

          .slider-indicator li {
              width: 8px;
              height: 8px;
              margin: 4px;
              border-radius: 50%;
              background: #fff;
              opacity: 0.4;
              cursor: pointer;
          }

          .slider-indicator li.active {
              width: 12px;
              height: 12px;
              opacity: 1;
          }
      </style>
   </head>

   <body>
      <div class="slider">
         <div class="slider-wrapper">
            <img src="./images/slider01.jpg" alt=""/>
         </div>
         <div class="slider-footer">
            <p>对人类来说会不会太超前了？</p>
            <ul class="slider-indicator">
               <li class="active"></li>
               <li></li>
               <li></li>
               <li></li>
               <li></li>
               <li></li>
               <li></li>
               <li></li>
            </ul>
            <div class="toggle">
               <button class="prev">&lt;</button>
               <button class="next">&gt;</button>
            </div>
         </div>
      </div>
      <script>
         // 1. 初始数据
         const sliderData = [
            {url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)'},
            {url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)'},
            {url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)'},
            {url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)'},
            {url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)'},
            {url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)'},
            {url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)'},
            {url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)'},
         ]
         const img = document.querySelector('.slider-wrapper img')
         const p = document.querySelector('.slider-footer p')
         const bgc = document.querySelector('.slider-footer')
         let i = 0
         setInterval(function () {
            i++
            if (i === sliderData.length) {
               i = 0
            }
            console.log(i)
            img.src = sliderData[i].url
            p.innerHTML = sliderData[i].title
            bgc.style.backgroundColor = sliderData[i].color
            document.querySelector('.slider-indicator .active').classList.remove('active')
            document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
         }, 1000)

      </script>
   </body>

</html>